<template>
  <div class="m-login">
    <!--头部LOGO  -->
    <h1>
      <img class="logo-small" src="../assets/logo.png"  @click="$router.push('/')" style="cursor: pointer;"/> 
    </h1>
    <div class="main-wrap">
      <!--背景图片  -->
      <img class="main-img" src="../assets/pg.png" />
      <w-form-validate @on-validate="onValidate">
      <!--注册主体  -->
        <div class="register-container clearfix">
          <div class="login-wrap fr">
            <div class="main-pad">
              <h3>新用户注册</h3>
            <div class="input-box phone">
              <w-input type="text" 
                v-model="username" 
                holder="请输入手机号码" 
                rule="isEmpty|isMobile" 
                error="请输入手机号码|手机号码错误" 
                :maxlength="11"
                @on-change="onChange">
              </w-input>
            </div>
            <div class="input-box clearfix code">
              <w-input class="fl input-pwd" 
                type="text"
                v-model="smsCode"
                holder="请输入验证码"
                rule="isEmpty|isCode"
                error="请输入验证码|验证码错误"
                :maxlength="6">
              </w-input>
              <button class="fr btn-ghost"
                ref="msgCode"
                type="button"
                :class="classType"
                :disabled="classType === 'disabled'"
                @click="getCode">
                获取短信验证码
              </button>
            </div> 
            <div class="input-box password">
              <w-input type="password"
                v-model="password"
                holder="请设置密码"
                rule="isEmpty|isPassword"
                error="请设置密码|密码为6到16位数字、字母或数字与字母组合"
                :maxlength="16">
              </w-input>
            </div>
            <div class="checkBox clearfix">
              <div class="checkBoxImg fl">
                <w-checkbox v-model="checkbox" label="1" value="isCheck" @input="isChecked"></w-checkbox>
              </div> 
              <div class="lineHeight">
                已阅读并同意<span class="color" @click="argeeText">《好下单用户条款》</span>
              </div>
            </div>    
            <w-button type="main">提交</w-button>
            <div class="link-group clearfix">
              <router-link to="/login" class="fr underLine">立即登录 > </router-link>
            </div>
            </div>
          </div>
        </div>
      </w-form-validate>
    </div>
    <!--底部导航  -->
    <w-login-footer></w-login-footer>

    <!--同意书，模态框  -->
    <div class="dialog-modal" v-show="isText">
      <div class="bg"></div>
      <div class="argeement modal">
        <!--关闭弹框按钮  -->
        <button type="button" class="btn-close transition-ease" @click="argeeText()">
          <span>&times;</span>
        </button> 
        <!--同意书，正文  -->
        <div class="content">
          <p v-html="content">{{content}}</p>
        </div>
        <div class="btn-main">
          <w-button type="main" class="btnC" @on-click="commitText">同意协议</w-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiRegister, apiMsgCode, apiExistence, apiAgreement } from 'js/api'

  export default {
    props: {
      type: {  // default, main
        type: String,
        default: 'code'
      }
    },
    data() {
      return {
        username: '',
        password: '',
        code: '',
        checkbox: '',
        smsCode: '', // 验证码
        isText: false, // 同意书，默认隐藏
        content: '', // 协议内容
        msgCodeTime: 60,
        classType: this.type,
        timer: '',
        isCheck: true // check框选中状态，默认选中
      }
    },
    // 解决账号，密码等从浏览器cookie中自动获取
    created() {
      this.username = ''
      this.smsCode = ''
      this.password = ''
    },
    methods: {
      onGetCode() {
        const oTarget = this.$refs.msgCode
        if (this.msgCodeTime === 0) {
          this.classType = 'code'
          oTarget.innerHTML = '获取短信验证码'
          this.msgCodeTime = 60
        } else {
          this.classType = 'disabled'
          oTarget.innerHTML = `重新发送${this.msgCodeTime}s`
          this.msgCodeTime--
          this.timer = setTimeout(() => {
            this.onGetCode()
          }, 1000)
        }
      },
      // 获取验证码
      getCode() {
        if (this.username == '') return
        if (!/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(this.username)) return
        // 判断用户是否存在，若不存在则可注册
        apiExistence(this.username).then((data) => {
          if (data.code == '1011') {
            this.$toast('用户已存在，请直接登录', () => {
              this.$router.push('./login')
            })
            return
          } else {
            // 用户不存在
            this.onGetCode()
            apiMsgCode(this.username).then((data) => {
              if (data.code == '200') {
                this.smsCode = data.data.smsCode
                // this.onGetCode()
              } else {
                this.$toast(data.msg, () => {
                  // 重置获取按钮
                  clearTimeout(this.timer)
                  const oTarget = this.$refs.msgCode
                  this.classType = 'code'
                  oTarget.innerHTML = '获取短信验证码'
                })
              }
            })
          }
        })
      },
      onChange() {
        if (/^(((13[0-9]{1})|(17[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(this.username)) {
          const oTarget = this.$refs.msgCode
          this.classType = 'code'
          oTarget.innerHTML = '获取短信验证码'
          this.msgCodeTime = 60
          clearTimeout(this.timer)
        } else {
          this.getCode()
        }
      },
      // 《好下单》同意书
      argeeText() {
        this.isText = !this.isText
        this.feachAgreement()
      },
      isChecked() {
        this.isCheck = !this.isCheck
      },
      // 同意书已阅
      commitText() {
        this.isText = !this.isText
      },
      feachAgreement() {
        apiAgreement().then(data => {
          if (data.code == '200') {
            this.content = data.data.content
          }
        })
      },
      // 提交登录
      onValidate() {
        if (!this.isCheck) {
          this.$toast('您还未同意《好下单用户条款》')
        } else {
          apiRegister(this.username, md5(this.password), this.smsCode).then((data) => {
            if (data.code == '200') {
              // 注册JMessage帐号
              JIM.register({
                username: this.username,
                password: this.username
              })
              // 记住手机号码
              sessionStorage.setItem('mobile', this.username)
              // 成功跳转
              this.$toast('恭喜你，注册成功！', () => {
                // 清空当前页的用户，密码,验证码
                clearTimeout(this.timer) // 清空计时器
                this.username = ''
                this.password = ''
                this.code = ''
                this.$router.push('./login')
              })
            } else {
              this.smsCode = ''
              this.$toast(data.msg)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .login-wrap {
    .w-input {
      .error-tip {
        margin-top: -17px!important;
      }
    }
  }
</style>

<style lang="scss">
  @import '../scss/_var.scss';
  $fontSize: 14px;
  h1 {
    img {
      margin: 42px auto 24px 192px;
    }
  }
  .m-login {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    min-width: 1230px;
    z-index: 20;
    background: #f6f6f6;
  }
  .main-wrap {
    .main-img {
      height: 532px;
    }
  }
  .register-container {
    position: absolute;
    width: 1000px;
    height: 532px;
    top: 110px;
    left: 0;
    right: 0;
    margin: 0 auto;
    .login-wrap {
      width: 361px;
      height: 380px;
      margin: 76px 0;
      .main-pad{
        padding: 0 41px;
        height: inherit;
        h3 {
          font-size: 24px;
          color: $color-dark;
          padding: 40px 0 20px 0;
        }
        background: $color-white;
        .input-box {
          &.phone{
            margin-bottom: 20px;
          }
          &.code {
            margin-bottom: 20px;
            .input-pwd {
              width: 130px;
            }
          }
          &.password {
            margin-bottom: 24px;
          }
        }
        .checkBox {
          color: $color-disabled;
          font-size: $fontSize;
          margin-bottom: 10px;
          .checkBoxImg {
            width: 18px;
            margin-right: 5px;
          }
          .lineHeight {
            line-height: 18px;
          }
          .color {
            color: #4270E6;
            cursor: pointer;
          }
        }
        .main {
          width: 100%;
          font-size: 18px;
          margin-bottom: 20px;
        }
        .underLine {
          text-decoration: underline;
        }
      }
    }
  }
  // 同意书，模态框
  .dialog-modal {
    .bg {
      background-color: #000;
      opacity: 0.4;
      position: fixed;
      z-index: 111;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .argeement {
      &.modal {
        width: 520px;
        height: auto;
        max-height: 444px;
        overflow: auto;
        background-color: $color-white;
        position: absolute;
        z-index: 1111;
        top: 25%;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding: 30px 25px;
        border-top: 2px solid $color-main;
        .tiltle {
          width: 56px;
          text-align: right;
          color: $color-disabled;
          font-size: 14px;
          margin-right: 33px;
          vertical-align: top;
        }
        .btn-main {
          margin-top: 60px;
          text-align: center;
          .btnC {
            width: 180px;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>